<template>
  <div class="dynamic_title" v-if="props.question.type !== 'slot'" :style="props.question.state.style || {}">
    <div class="dynamic_head dynamic_h3" v-if="props.question.type === 'h3'">
      <h3>
        {{ props.question.label }}
        <a-tooltip placement="topLeft" :title="props.question.state.iconHint" v-if="props.question.state.icon">
          <i class="iconfont" :class="props.question.state.icon"></i>
        </a-tooltip>
      </h3>
    </div>
    <div class="dynamic_head dynamic_h4" v-else>
      <h4 v-if="props.question.label">
        {{ props.question.label }}
        <a-tooltip placement="topLeft" :title="props.question.state.iconHint" v-if="props.question.state.icon">
          <i class="iconfont" :class="props.question.state.icon"></i>
        </a-tooltip>
      </h4>
      <i v-if="!props.question.state.noShrink" class="iconfont icon-chevron-down" :class="{ 'shrink_icon': props.question.state.isMoer }" @click="shrinkMethod"></i>
    </div>
  </div>
</template>
<script setup lang="ts">
import { watch, getCurrentInstance, onMounted, onUnmounted, ref } from 'vue';
import { QuestionBase } from '../../../question-base';

//subject变量

const { proxy }: any = getCurrentInstance();
let props = defineProps<{ question: QuestionBase<any>; formData: any }>();
const emit = defineEmits(['shrinkMethod']);

onMounted(() => {
  props.question.state.isMoer = false;
});

const shrinkMethod = () => {
  props.question.state.isMoer = !props.question.state.isMoer;
  emit('shrinkMethod')
};
</script>

<style lang="less" scoped>
@import url('./input-title.component.less');
</style>
